웹 기술로 만드는 협업형 여행 계획 플랫폼 TripTune 개발기 진행 중

사이트: https://triptune.site

깃허브: https://github.com/TripTune-Project/TripTune-Frontend

한 줄 소개:

함께 여행계획을 작성하는 웹 프로젝트

기술 스택:

TypeScript, Next, React, Material-UI, Tanstack-query, Zustand , WebSocket, Stomp.js

주요업무:

피그마로 간단한 프로토타입 목업 작업 진행
프론트엔드 전체 구성 및 작성
- 현재 24년 11월 23일 기준 중간 점검 진행 중
- 회원 정보
- 여행지 탐색
- 일정 만들기
- 마이페이지(미정)

업무 기간:

2024.05 ~ 2024.12 (예정)

개발 인원:

기획 및 프론트엔드 1명
디자인 및 백엔드 1명

프로젝트 개요

피그마나 혹은 함께 일정을 만들어가는 어플리케이션을 창작하고 싶은 마음으로 시작을 하게 되었습니다.

주요 기술 성과

1. 액세스 토큰 기반 API 요청 관리 및 리프레시 로직 구현

성과
- 커스텀 fetch 함수를 활용하여 인증이 필요한 API 요청을 효율적으로 관리.
- 토큰 만료 시 refresh token을 통해 자동 갱신하며, 실패 시 로그인 리다이렉션 처리로 인증 상태 관리 자동화.
- 여행 일정 작성 중 토큰 만료로 데이터가 초기화되지 않도록 작업 연속성을 보장.
선택 이유
- 인증 실패(401)와 같은 공통 문제를 해결하며 사용자 경험(UX)을 유지하기 위해 도입.
- React-Query와 Fetch를 각각 역할에 맞게 구분:
  - React-Query는 데이터 캐싱이 중요한 기능(예: 무한스크롤)에서 활용.
  - Fetch는 인증 요청과 같이 실시간 데이터 처리가 중요한 곳에 사용.
- 중복 로직 제거로 API 요청의 가독성과 유지보수성을 개선.
기대 효과
- 사용자 재로그인 빈도 감소로 UX 향상.
- 인증 및 에러 처리 로직 표준화로 코드의 일관성과 확장성 확보.
- 서버 리소스 활용 최적화 및 시스템 안정성 강화.

2. 검색 기능 최적화: 자동 완성과 디바운스 구현

성과
- 입력 중 디바운스 로직을 커스텀 훅으로 구현해 과도한 서버 요청 방지.
- 실시간 검색 자동 완성을 통해 사용자 편의성을 대폭 증대.
선택 이유
- 실시간 데이터 제공과 입력 속도 간 균형을 맞추면서 서버 부하를 최소화하기 위해 도입.
기대 효과
- 서버 요청 감소로 리소스 활용 효율성 증가.
- 사용자 경험(UX) 개선 및 검색 결과 신뢰도 강화.

3. API 요청 검증 및 에러 처리 미들웨어 구현

성과
- Next.js 미들웨어를 활용하여 API 요청 경로를 사전 검증.
- 잘못된 요청 시 404 페이지로 리다이렉트 처리하여 사용자 피드백을 개선.
선택 이유
- 불필요한 API 요청과 리소스 낭비를 방지하기 위해 도입.
- 사용자 경험 강화 및 시스템 안정성을 위해 설계.
기대 효과
- API 서버 부하 감소로 성능 향상.
- 명확한 에러 처리를 통한 사용자 경험(UX) 개선.

4. Zustand 및 React-Query를 활용한 효율적인 상태 관리

성과
- Zustand와 React-Query를 결합해 여행지 탐색 데이터를 전역 상태로 관리.
- 무한스크롤 기능에서 React-Query를 활용해 데이터 캐싱 및 API 호출 최적화(staleTime과 cacheTime 활용).
- 특정 페이지 데이터만 유지하는 대신 여러 페이지 간 데이터를 효율적으로 공유 및 캐싱.
선택 이유
- React-Query는 데이터 캐싱과 상태 관리에 적합하여 서버 요청을 줄이고 UX를 개선하기 위해 도입.
- Fetch와는 독립적으로 인증 요청과 같은 실시간 데이터 처리에 사용하여 역할을 명확히 구분.
- 간단하고 직관적인 상태 관리 도구 Zustand를 통해 상태 로직을 간소화.
기대 효과
- 중복 요청 감소로 서버 리소스 절약.
- 상태 관리 간소화 및 유지보수성 향상.
- 사용자 경험 개선으로 전반적인 서비스 품질 향상.

5. 실시간 채팅 기능 구현

성과
- STOMP 기반 WebSocket을 활용해 실시간 메시징 기능과 과거 메시지 불러오기(무한 스크롤) 구현.
- 안정적인 연결을 위한 재연결 및 심장박동 로직 설정.
선택 이유
- 실시간 데이터 통신이 필요한 기능에서 WebSocket과 STOMP.js의 간결성과 효율성을 활용.
기대 효과
- 사용자 간 실시간 소통 지원으로 UX 향상.
- 유지보수 및 확장 용이한 구조 제공.
- 안정적인 메시지 전송 및 로딩 경험 제공.

6. Drag and Drop(DnD) 및 BFF 최적화 구현

성과
- React DnD와 HTML5 Backend를 활용해 여행 일정 관리 시스템의 Drag and Drop(DnD) 기능 구현.
- BFF(Backend-for-Frontend) 패턴을 적용하여 외부 API에서 가져온 여행 데이터와 클라이언트의 상태(travelRoute)를 병합.
- 사용자들이 일정 순서를 직관적으로 변경하고 불필요한 일정은 삭제 드롭 존(Delete Zone)을 통해 간편히 제거할 수 있도록 UI/UX 개선.
선택 이유
- 사용자가 여행 일정을 추가, 정렬, 삭제할 때 시각적이고 직관적인 조작 방식을 제공하여 사용자 경험(UX)을 향상시키기 위해 DnD 도입.
- BFF 패턴 도입 이유:
  - 클라이언트가 필요로 하는 데이터만 적시에 가공 및 제공하여 프론트엔드의 불필요한 데이터 처리 부담을 줄임.
  - 데이터 병합 및 순서(order) 추가 등 사용자 맞춤형 데이터 구조를 제공하여 UI 로직과 데이터 로직을 분리.
- React DnD와 HTML5 Backend는 React 생태계와 높은 호환성을 가지고 있으며, 복잡한 상태 관리를 간소화하면서 컴포넌트 기반 설계에 최적화된 기술로 판단.
기대 효과
- 사용자 만족도 증가: 실시간 시각적 피드백 및 최적화된 데이터 구조 제공으로 더 나은 사용자 경험을 제공.
- 유지보수 효율성 향상: 컴포넌트 기반 설계와 BFF 패턴 적용으로 UI와 데이터 처리 로직의 분리 및 확장 가능성을 확보.
- 업무 생산성 향상: 클라이언트에서의 데이터 가공 작업을 BFF에서 처리함으로써 클라이언트의 복잡도를 감소시키고 작업 시간을 단축.